<template>
  <div class="userManagePage">
<!--    搜索-->
    <a-form layout="inline" :model="userQueryRequest" @finish="doSearch">
      <a-form-item label="账号">
        <a-input v-model:value="userQueryRequest.userAccount" placeholder="输入账号" />
      </a-form-item>
      <a-form-item label="昵称">
        <a-input v-model:value="userQueryRequest.userName" placeholder="输入用户名" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>

    <!--    table-->
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      @change="handleTableChange"
    >
    <template #headerCell="{ column }">
<!-- todo 优化：id列不显示
解决x：所以将columns中含有默认显示的那个关键字(dataIndex)改成其他的就行了:dataIndex->key
<template v-if="column.dataIndex === 'id'">id不显示出来，但是不嫩更改column(因为删除需要recode.id)</template>-->
      <template v-if="column.dataIndex === 'userName'">
        <span>
          <smile-outlined />
          用户名
        </span>
      </template>
    </template>
<!--没有需要特殊处理的，默认按照text文本形式展示，需要特殊样式展示的才需要进行判断-->
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'userAvatar'">
        <a-image :src="record.userAvatarUrl" mode="aspectFill" :width="120" />
      </template>
      <template v-else-if="column.dataIndex === 'userRole'">
        <span>
           <a-tag
             :color="record.userRole === 'admin' ? 'volcano': 'geekblue'"
           >
            {{ record.userRole === 'admin' ? '管理员' : '普通用户'}}
          </a-tag>
<!--          todo 枚举类<a-tag-->
<!--            v-for="tag in record.tags"-->
<!--            :key="tag"-->
<!--            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"-->
<!--          >-->
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'createTime' || column.dataIndex === 'updateTime'">
        {{dayjs(column.dataIndex === 'createTime' ? record.createTime:record.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a-button type="dashed" @click="deleteUserClick(record.id)">删除</a-button>
        </span>
      </template>
    </template>
  </a-table>
  </div>
</template>
<script lang="ts" setup>
import { computed, createVNode, reactive, ref } from 'vue'
import { SmileOutlined,ExclamationCircleOutlined  } from '@ant-design/icons-vue';
import dayjs from 'dayjs'
import myAxios from '@/request.ts'
import { message } from 'ant-design-vue'
import { Button,Modal } from 'ant-design-vue'

//test
const data = [
  {
    id: 1,
    userAccount: '侯媛婧',
    userName: '侯媛婧',
    userAvatar: '',
    userProfile: '',
    userRole: 'user',
    createTime: '',
    updateTime: '',
  },
  {
    id: 2,
    userAccount: '张三',
    userName: '张三',
    userAvatar: '',
    userProfile: '',
    userRole: 'admin',
    createTime: '',
    updateTime: '',
  }
]


// const data = ref<[]>([])
const total = ref<number>(0)
// const currentPage = ref<number>(1) 不需要了
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
  },
  {
    title: '昵称',
    dataIndex: 'userName',
  },
  {
    title: '头像',
    dataIndex: 'userAvatar',
  },
  {
    title: '简介',
    dataIndex: 'userProfile',
  },
  {
    title: '角色',
    dataIndex: 'userRole',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
  },
  {
    title: '操作',
    key: 'action',
  },
]

//定义数据类型：用于传递给获取列表数据的post请求的body
interface UserQueryRequest{
  id:number,
  userAccount:string,
  userName:string,
  userProfile:string,
  userRole:string,
  sortField:string,
  sortOrder:string,
  current:number,
  pageSize:number,
}

//⭐为什么仍需要userQueryRequest
//原因:在搜索中v-modal需要绑定具有响应属性的内容,而这个内容是UserQueryRequest类型的
const userQueryRequest=reactive<UserQueryRequest> ({
  current:1, //因为这里写了,所以当执行handleTableChange时,直接更改这里的就行,不用再单独定义一个ref类型的current
  pageSize:1,
})


//获取数据⭐时机⭐应该在？？？
const fetchData = async () => {
  myAxios.post('/list/page/vo',{userQueryRequest}).then((res) => {
    if(res.data.code === 0){
      data.value = res.data.data.records
      total.value = res.data.data.total //分页才需要
    }else{
      message.error(res.data.message)
    }
  }).catch((err)=>{
    console.log(err)
  })
}
//⭐表格分页：
// 1. 获取到数据的总页码赋给table
// 2. 获取到表格的current然后把current作为queryRequest传给后端接口获取到当前页码的数据
// 为什么用computed
// 原因：需要对响应式(current)进行操作(当切换页码时，需要修改current)
const pagination = computed(() => ({
  total: total.value,
  current: userQueryRequest.current,
  pageSize: userQueryRequest.pageSize,
}));

//⭐回调函数：回调的结果就是大括号里面的
const handleTableChange:TableProps['onChange'] = (pag: { pageSize: number; current: number })=>{
  //需要获取到table的页码
  //调用后端接口
  console.log('页码改变：',pag)
  userQueryRequest.current = pag.current
  fetchData()
}

//删除用户
const deleteUserClick = async (id:string) => {
  Modal.confirm({
    title: '删除当前记录?',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      message.success(id);
      myAxios.post('/delete',{
        id: id
      }).then(res=>{
        if(res.data.code === 0){
          message.success('删除成功');
          fetchData()
        }
      }).catch((err)=>{console.log(err)})
    }
  });
};


//搜索:调用fetchData接口
//todo 为什么这里不需要加async
const doSearch = (value:any)=>{
  fetchData({
    userQueryRequest,
    ...value
  })
}
</script>

<style scoped>
#userManagePage{

}
</style>
